<template>
  <div class="dialog_sms_choose_had">
    <el-form :inline="true" ref="smsListData" :model="smsListForm" >
      <el-form-item class="block-line">
        <el-col :span="8">
          <el-input v-model="smsListForm.title" placeholder="输入标题关键字搜索"></el-input>
        </el-col>
        <el-col :span="3"><el-button style="margin-left:10px" @click="submitSmsList('smsListForm')">搜索</el-button></el-col>
      </el-form-item>
    </el-form>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="smsList.list" stripe class="table">
      <el-table-column label="标题" width="" prop="title">
        <template slot-scope="scope">
          <el-popover placement="right" :title="scope.row.title" width="240" trigger="hover" :content="filterHtmlTags(scope.row.content)">
            <div class="sms-title" slot="reference">
              {{scope.row.title}}
              <div class="sms-hot" v-if="scope.row.top==1">顶</div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80"  class-name="is-center sms-opra">
        <template slot-scope='scope'>
          <el-button type='text' @click="useSms(scope.row)">使用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="smsListForm.page"
        :page-size.sync="smsListForm.size"
        layout="total, prev, pager, next, jumper"
        :total="smsList.page.total"
        @current-change="submitSmsList('smsListForm')">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapMutations} from 'vuex'
  export default {
    data () {
      return {
        smsListData: {
          title: this.smsListForm.title,
          page: this.smsListForm.page,
          size: this.smsListForm.size
        },
        tbLoading: false
      }
    },
    props: ['smsList', 'smsListForm', 'smsForm'],
    mounted () { },
    watch: {
      sel (val) {
        this.SELECT_SOURCE({id: val})
      }
    },
    methods: {
      ...mapMutations(['SELECT_SOURCE']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 去除html标签
      filterHtmlTags (html) {
        return html.replace(/<\/?.+?>/g, '').replace(/ /g, '')
      },
      submitSmsList (smsListData) {
        this.$emit('refreshbizlines', smsListData)
      },
      // 使用
      useSms (o) {
        this.smsForm.title = o.title
        this.smsForm.content = o.content
        this.smsForm.dialogChooseSms = false
      }
    }
  }
</script>
<style lang="scss">
  .dialog_sms_choose_had{
    .sms{
      &-title{display: inline-block;}
      &-hot{display: inline-block; background: #ff0000; font-size: 10px;width: 14px;height: 14px;line-height: 13px; text-align: center; color: #fff; float: right; margin-left: 10px;}
      &-opra{
        min-width: 220px!important;
        .el-button{
          min-width: 60px;
        }
      } 
    }
  }
</style>
